import services from '@/services/demo';
import {
  ActionType,
  FooterToolbar,
  ProDescriptions,
  ProDescriptionsItemProps,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Divider, Input,Checkbox, message,Form,Modal,Row,Col,Table,Radio,Select,Upload, InputNumber } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { FormProps } from 'antd';
import React, { useRef, useState,useEffect } from 'react';
import { history } from 'umi';

const { userList,rewardInsert,del,update,pointList } =
  services.infoController;

const TableList: React.FC<unknown> = () => {
  const [list, setList] = useState<any[]>([]);// 列表数据
  const [showPoint, setShowPoint] = useState<boolean>(false);// 列表数据
  const [customer, setCustomer] = useState<boolean>(false);// 上传客户弹窗
  const [pageNum, setPageNum] = useState<number>(1);// 页码
  const [actionId, setActionId] = useState<string>('');// 
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const actionRef = useRef<ActionType>();
  const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
    {
      title: '学生姓名',
      dataIndex: 'studentName',
      // tip: '名称是唯一的 key',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '名称为必填项',
          },
        ],
      },
    },
    {
      title: '认证状态',
      dataIndex: 'authorizationState',
      hideInSearch:true,
      // tip: '名称是唯一的 key',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '名称为必填项',
          },
        ],
      },
      render: (_, record) => (
        <>
          <div style={{width:record.authorizationState!=2?'35px':'30px',height:record.authorizationState!=2?'20px':'22px',display:'flex',alignItems:'center'}}>
            {record.authorizationState!=2?<svg t="1715603427315" class="icon" viewBox="0 0 1752 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37112" data-spm-anchor-id="a313x.search_index.0.i70.2b2d3a81dA8TUF" width="200" height="200"><path d="M795.626681 403.85292648h395.54888567v68.65613786H795.626681z m120.39139528 504.57531247l-3.45079407-3.42414728H135.27268515a54.12016866 54.12016866 0 0 1-39.06458293-15.81502642 54.49322779 54.49322779 0 0 1-15.9615858-39.09122972V129.25502378c0-30.87061315 24.07561418-58.34372682 55.02616873-58.34372681h1107.49158057a54.09352187 54.09352187 0 0 1 39.09122971 15.85499761 54.42660982 54.42660982 0 0 1 15.934939 39.15784769v432.42841034l3.46411749 3.39749951c18.34649705 10.81870417 34.64117179 24.79508467 48.16455176 41.27628799l13.74988071 17.14738021V112.10764458C1363.1423366 53.75059335 1314.97778485 5.70595318 1256.54079324 5.70595318H118.07201133C59.60837193 5.70595318 11.45714357 53.75059335 11.45714357 112.10764458v755.12424678c0 58.35705021 48.15122835 106.40169139 106.61486776 106.40169139h842.57988224l-10.32573445-13.72323394c-13.74988073-17.16070362-24.07561418-34.30808384-34.40134763-51.46878647zM795.626681 554.90175856h116.9139544v68.62949107h-116.9139544z m0-298.64687008h395.54888567v68.65613788H795.626681z m361.14753806 308.94595673c-127.25301125 0-227.00626203 99.52675102-227.00626304 226.53993909C929.76795602 915.30317934 1032.95867749 1018.29404682 1156.77421906 1018.29404682 1284.0272303 1018.29404682 1383.78048111 918.7273256 1383.78048111 791.72746092s-103.19072047-226.52661571-227.00626205-226.52661571zM566.83506561 483.18121014a183.3717096 183.3717096 0 0 0 48.81740526-201.71820765 182.49235734 182.49235734 0 0 0-170.46121097-117.71336531 182.47903293 182.47903293 0 0 0-170.44788853 117.71336531 183.3717096 183.3717096 0 0 0 48.80408185 201.71820765c-103.68369119 47.73819902-170.1414464 151.70168458-170.128124 266.13746296h72.95963742c0-121.24410074 97.98122186-219.51844037 218.85226346-219.51844037s218.85226348 98.27433962 218.85226348 219.51844037h72.95963642c0-114.46242519-66.48440199-218.42591075-170.22138777-266.13746296z m-121.60383551-246.0056126a109.42613174 109.42613174 0 0 1 101.09892701 67.75013683 110.01236726 110.01236726 0 0 1-23.71587944 119.60530679 109.19963196 109.19963196 0 0 1-119.25889446 23.79582082 109.75921969 109.75921969 0 0 1-67.55028482-101.40536814c0-60.60872648 48.99061044-109.74589629 109.42613172-109.7458963z m827.68417828 626.75205913l-44.18081675 44.31405271-71.96037257-72.17354894-71.97369596 72.17354894-44.18081777-44.31405271 71.96037257-72.18687237-71.96037257-72.17354892 44.18081777-44.31405275 71.97369596 72.17354895 71.96037257-72.17354895 44.18081675 44.31405275-71.96037258 72.17354892z" fill="#063f5c" p-id="37113" data-spm-anchor-id="a313x.search_index.0.i71.2b2d3a81dA8TUF" class="selected"></path></svg>
            :<svg t="1715602602674" class="icon" viewBox="0 0 1392 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33925" data-spm-anchor-id="a313x.search_index.0.i46.2b2d3a81dA8TUF" width="200" height="200"><path d="M799.03168208 409.48410219L1175.16580489 409.48410219l0 65.08398281L799.03168208 474.568085 799.03168208 409.48410219 799.03168208 409.48410219z" p-id="33926" fill="#0b577e" data-spm-anchor-id="a313x.search_index.0.i51.2b2d3a81dA8TUF" class="selected"></path><path d="M913.50989333 887.8566275l-3.28494844-3.25494938L171.08149395 884.60167813c-29.42954063 0-52.3341825-22.78464375-52.3341825-52.06418625L118.74731145 149.14817c0-29.2795425 22.88964281-55.31913563 52.3341825-55.31913563l1053.13354501 0c29.44453969 0 52.3341825 22.78464375 52.3341825 52.07918625l0 410.01859313 3.26994937 3.25494937c16.349745 9.76484719 32.69948906 22.78464375 45.79428469 39.04438969l13.07979562 16.27474594L1338.69324927 132.87342406C1338.69324927 77.55428844 1292.89896552 32 1237.30983364 32L154.71674895 32C99.12761802 32 53.33333333 77.55428844 53.33333333 132.87342406l0 715.92381375c0 55.31913563 45.79428469 100.87342406 101.38341562 100.87342407L956.01922864 949.67066094l-9.80984718-13.01979657C933.12958677 920.39111844 923.31973958 904.11637344 913.50989333 887.8566275L913.50989333 887.8566275z" p-id="33927" data-spm-anchor-id="a313x.search_index.0.i48.2b2d3a81dA8TUF" class="" fill="#41a6db"></path><path d="M799.03168208 552.67186437l111.19326281 0 0 65.08398282-111.19326281 0L799.03168208 552.67186437 799.03168208 552.67186437z" p-id="33928" fill="#0b577e" data-spm-anchor-id="a313x.search_index.0.i52.2b2d3a81dA8TUF" class="selected"></path><path d="M799.03168208 269.55128844L1175.16580489 269.55128844l0 65.08398281L799.03168208 334.63527125 799.03168208 269.55128844 799.03168208 269.55128844z" p-id="33929" data-spm-anchor-id="a313x.search_index.0.i49.2b2d3a81dA8TUF" class="selected" fill="#0b577e"></path><path d="M1142.45131583 562.43671156c-121.00310906 0-215.86162687 94.36352531-215.86162687 214.78164375 0 117.14817 98.12846719 214.78164375 215.86162687 214.78164375C1263.46942489 991.985 1358.3129427 897.60647469 1358.3129427 777.20335625 1358.3129427 656.80023781 1260.18447646 562.43671156 1142.45131583 562.43671156L1142.45131583 562.43671156zM1139.18136739 907.37132187c-9.80984719 9.76484719-29.42954063 9.76484719-42.50933625 1e-8l-91.57356937-91.10857688c-9.80984719-9.76484719-9.80984719-29.2795425 0-39.04438969s29.42954063-9.76484719 42.50933625 0l71.95387593 71.59388157 140.6378025-136.67786438c9.80984719-9.76484719 29.42954063-9.76484719 42.50933625 0 9.80984719 9.76484719 9.80984719 29.2945425 0 39.05938969L1139.18136739 907.37132187 1139.18136739 907.37132187z" p-id="33930" data-spm-anchor-id="a313x.search_index.0.i45.2b2d3a81dA8TUF" class="" fill="#d81e06"></path><path d="M581.46008145 484.67792656c35.45944594-31.75450406 57.79409719-77.89378312 57.79409719-129.23798062C639.26917771 259.65144313 561.61539177 181.99765625 465.82688802 181.99765625s-173.44228969 77.65378688-173.44228969 173.44228969c0 51.3591975 22.31965125 97.49847656 57.79409719 129.23798062C254.67518708 528.53724125 188.33122395 625.00073469 188.33122395 736.98898438l69.37391625-1e-8c0-114.94320375 93.17854406-208.12174781 208.12174782-208.12174781S673.94863583 622.04578062 673.94863583 736.98898438L743.32255208 736.98898438C743.32255208 625.00073469 676.97858896 528.53724125 581.46008145 484.67792656zM465.82688802 251.3715725c57.47910187 0 104.06837437 46.5892725 104.06837437 104.06837437S523.30598989 459.49332031 465.82688802 459.49332031s-104.06837437-46.5892725-104.06837438-104.06837437S408.34778614 251.3715725 465.82688802 251.3715725z" p-id="33931" data-spm-anchor-id="a313x.search_index.0.i47.2b2d3a81dA8TUF" class="selected" fill="#0b577e"></path></svg>}
          </div>
        </>
      ),
    },
    
    {
      title: '地区',
      dataIndex: 'region',
      hideInSearch:true,
      valueType: 'textarea',
      render: (_, record) => (
        <>
          {record.region=='1'?'国内':'国外'}
        </>
      ),
    },
    {
      title: '渠道',
      dataIndex: 'channel',
      hideInSearch:true,
    },
    {
      title: '积分',
      dataIndex: 'points',
      hideInSearch:true,
      render: (_, record) => (
        <>
          {record.points >0?'+'+record.points:record.points}
        </>
      ),
    },
    {
      title: '是否兼职人员',
      dataIndex: 'isPartTimeJob',
      hideInSearch:true,
      render: (_, record) => (
        <>
          {record.isPartTimeJob ==1?'是':'否'}
        </>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      hideInSearch: true,
      hideInForm:true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              handleRemove(record.id || '')
            }}
          >
            删除
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => add(record)}
          >
            编辑
          </a> 
          <Divider type="vertical" />
          <a
            onClick={() => {showPointData(record.id || '')}}
          >
            积分使用情况
          </a> 
          <Divider type="vertical" />
          <a
            onClick={() => {showCustomer(record.id || '')}}
          >
            上传客户信息
          </a> 
        </>
      ),
    },
  ];
  // 获取列表数据
  const getList = ()=>{
    userList({pageNum,pageSize:10,...searchData}).then((res:any)=>{
      if(res.code=='200'){
        setList(res.data.list || [])
        setTotal(res.data.total)
      }else{
        message.error(res.message);
      }
    })
  }
  const [searchData, setSearchData] = useState<any>({});// 搜索参数
  useEffect(()=>{
    getList()// 获取列表数据
  },[pageNum,searchData])
  const search = async (value:any) => {
    setPageNum(1)
    setSearchData({...value})
  }
  const add = (data:any={})=>{
    form.resetFields();// 重置
    handleModalVisible(true)
    setYear('')
    setMonth('')
    setDay('')
    if(data.id){// 编辑  
      setActionId(data.id || '')
      form.setFieldsValue({...data})
      if(data.birthDay){
        setYear(data.birthDay.split('-')[0])
        setMonth(data.birthDay.split('-')[1])
        setDay(data.birthDay.split('-')[2])
      }
      
    }else{// 新建
      setActionId('')
      
    }
  }
  // 删除节点
  const handleRemove = async (id:string) => {
    Modal.confirm({
      title: '确定删除此条数据？',
      content: '',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        const hide = message.loading('正在删除');
        del({id:id}).then((res:any)=>{
          if(res.code=='200'){
            message.success('删除成功，即将刷新');
            getList()
          }else{
            message.error(res.message);
          }
          hide()
        })
        // hide()
      },
      onCancel() {
        
      },
    });
  };  
  const onFinish: FormProps['onFinish'] = (values) => {
    console.log('Success:', values);
    let params = {id:actionId,...values}
    if(year || month || day){
      if(!year || !month || !day){
        message.error('请将出生日期填写完整');
        return
      }
      params.birthDay=`${year}-${month}-${day}`
    }
    
    update(params).then((res:any)=>{
      if(res.code=='200'){
        message.success('修改成功');
        handleModalVisible(false)
        setPageNum(1)
        getList()
      }else{
        message.error(res.message);
      }
    })
  };
  
  const onFinishFailed: FormProps['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  //积分使用
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  const [pointPageNum, setPointPageNum] = useState<number>(1);// 页码
  const [pointData, setPointData] = useState<any[]>([]);// 页码
  const showPointData = (id:any)=>{
    console.log(3,id)
    setShowPoint(true);
    setActionId(id)
    getPointList(id)
  }
  // 显示上传客户
  const showCustomer = (id:any)=>{
    console.log(3,id)
    setCustomer(true);
    setActionId(id)
  }
  const getPointList=(id='')=>{
    pointList({pageNum:pointPageNum,pageSize:10,queryStudentId:id || actionId}).then(res=>{
      if(res.code=='200'){
        setPointData(res.data.list || [])
      }
    })
  }
  const search2 = async (value:any) => {
    setPointPageNum(1)
    getPointList(value)// 获取列表数据
  }
  const pointColumns: TableProps<DataType>['columns'] = [
    {
      title: '时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '积分消费',
      dataIndex: 'points',
      key: 'points',
    },
    {
      title: '余额',
      dataIndex: 'currentPoints',
      key: 'currentPoints',
    }
  ];
  const [total, setTotal] = useState<number>(0);// 总数
  const pageOnChange = (page:number, pageSize:number)=>{
    setPageNum(page)
  }
  const [year, setYear] = useState<string>('');// 年
  const [month, setMonth] = useState<string>('');// 月
  const [day, setDay] = useState<string>('');// 日
  const options1=[]
  for(let i =0;i<100;i++){
    options1.push({value:2024-i,label:2024-i})
  }
  const options2=[]
  for(let i =1;i<=12;i++){
    options2.push({value:i<10?'0'+i:i,label:i<10?'0'+i:i})
  }
  const options3=[]
  for(let i =1;i<=31;i++){
    options3.push({value:i<10?'0'+i:i,label:i<10?'0'+i:i})
  }
  const onFinish2: FormProps['onFinish'] = (values) => {
    console.log('Success:', values);
    rewardInsert({userId:actionId,...values}).then((res:any)=>{
      if(res.code=='200'){
        message.success('添加成功');
        setCustomer(false)
        getList()
      }else{
        message.error(res.message);
      }
    })
  };
  return (
    <div>
      <ProTable<API.UserInfo>
        // headerTitle="查询表格"
        actionRef={actionRef}
        onSubmit={search}
        rowKey="id"
        search={{
          defaultCollapsed:false,
          labelWidth: 120,
        }}
        dataSource={list}
        pagination={{
          total,
          current:pageNum,
          pageSizeOptions:[],
          pageSize:10,
          hideOnSinglePage:true,
          onChange:pageOnChange
        }}
        columns={columns}
      />
      <Modal
        destroyOnClose
        title={'详情'}
        width={800}
        open={createModalVisible}
        onCancel={() => handleModalVisible(false)}
        footer={null}
      >
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 800 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <div style={{marginBottom:'20px',fontWeight:'bold',paddingLeft:'20px'}}>学生信息：</div>
          <Row>
            <Col span={12}>
              <Form.Item
                label="学生姓名"
                name="studentName"
                rules={[{ required: true, message: '请输入' }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="账号"
                name="account"
                rules={[{ required: true, message: '请输入' }]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入' }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="积分余额"
                name="points"
                rules={[{ required: true, message: '请输入' }]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                label="退款提示语"
                name="refundMsg"
              >
                <Input.TextArea />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="是否允许退款"
                name="refundSwitch"
              >
                <Radio.Group>
                  <Radio value={0}>禁止</Radio>
                  <Radio value={1}>允许</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                label="是否兼职人员"
                name="isPartTimeJob"
              >
                <Radio.Group>
                  <Radio value={0}>否</Radio>
                  <Radio value={1}>是</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <div style={{marginBottom:'20px',fontWeight:'bold',paddingLeft:'20px'}}>认证信息：</div>
          {/* <Row>
            <Col span={12}>
              <Form.Item
                label="姓名"
                name="authName"
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item
                label="出生日期"
                name="birthDay"
                labelCol={{ span: 4 }}
              >
                <Row>
                  <Col span={5}>
                    <Select
                      showSearch={true}
                      value={year}
                      onChange={(val)=>setYear(val)}
                      options={options1}
                    />
                  </Col>
                  <Col span={1} style={{lineHeight:'32px',textAlign:'center'}}>
                    <span>年</span>
                  </Col>
                  <Col span={5}>
                    <Select
                      showSearch={true}
                      value={month}
                      onChange={(val)=>setMonth(val)}
                      options={options2}
                    />
                  </Col>
                  <Col span={1} style={{lineHeight:'32px',textAlign:'center'}}>
                    <span>月</span>
                  </Col>
                  <Col span={5}>
                    <Select
                      showSearch={true}
                      value={day}
                      options={options3}
                      onChange={(val)=>setDay(val)}
                    />
                  </Col>
                  <Col span={1} style={{lineHeight:'32px',textAlign:'center'}}>
                    <span>日</span>
                  </Col>
                </Row>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item
                label="性别"
                name="gender"
              >
                <Radio.Group>
                  <Radio value={'1'}>男</Radio>
                  <Radio value={'2'}>女</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row> */}
          <Row>
            <Col span={12}>
              <Form.Item
                label="认证状态"
                name="authorizationState"
              >
                <Radio.Group>
                  <Radio value={0}>未认证</Radio>
                  <Radio value={2}>已认证</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>
          <Form.Item wrapperCol={{ offset: 10, span: 16 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        destroyOnClose
        title={'积分使用情况'}
        width={700}
        open={showPoint}
        onCancel={() => setShowPoint(false)}
        footer={null}
      >
        <Table columns={pointColumns} dataSource={pointData} rowKey="id" />
      </Modal>
      <Modal
        destroyOnClose
        title={'上传客户信息'}
        width={600}
        open={customer}
        onCancel={() => setCustomer(false)}
        footer={null}
      >
        <Form
          name="basic"
          form={form2}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 700 }}
          initialValues={{ remember: true }}
          onFinish={onFinish2}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Row>
            <Col span={24}>
              <Form.Item
                label="客户姓名"
                name="customerName"
                rules={[{ required: true, message: '请输入客户姓名' }]}
              >
                <Input style={{width:'200px'}} />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="购买课程名称"
                name="lessonName"
                rules={[{ required: true, message: '请输入购买课程名称' }]}
              >
                <Input style={{width:'200px'}} />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="购买课程价格"
                name="lessonPrice"
                rules={[{ required: true, message: '请输入购买课程价格' }]}
              >
                <InputNumber style={{width:'200px'}} />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="可获得积分"
                name="gainPoint"
                rules={[{ required: true, message: '请输入可获得积分' }]}
              >
                <InputNumber style={{width:'200px'}} />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item wrapperCol={{ offset: 10, span: 16 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      
    </div>
  );
};

export default TableList;
